<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">



<head th:replace="layouts::header"></head>

<body>


<!--        直接引用layouts.html文件中的模板，引用片段的名字为："navbar"  -->
<nav th:replace="layouts::navbar"></nav>

<div class="container">
    <h3>主面板</h3>
    <p th:text="${versionNumber}"></p>
    <hr>
    <h4>当前项目</h4>
    <div class="row">
        <div class="col-md-6">  <!--    "col-md-6":此div占6/12列的宽度。   -->

            <table class="table table-bordered table-striped">
                <thead class="thead-dark">
                <tr>
                    <th>项目名称</th>
                    <th>项目状态</th>
                </tr>
                </thead>

                <tbody>
                <!--                        迭代值 ： 迭代变量  -->
                <tr th:each="aProject : ${projects}">
                    <td th:text="${aProject.name}"></td>
                    <td th:text="${aProject.stage}"></td>
                </tr>
                </tbody>
            </table>
        </div>

        <!--    "col-md-4":此div占4/12列的宽度。   -->
        <div class="col-md-4">
            <canvas id="myPieChart" height="50" width="50"></canvas>
            <script>
                let chartData = "[[${projectStatusData}]] "
            </script>
        </div>

    </div>



    <div>
        <h4>当前学生列表</h4>
        <div class="row">
            <div class="col-md-6">  <!--    "col-md-6":此div占6/12列的宽度。   -->
                <table class="table table-bordered table-striped">
                    <thead class="thead-dark">
                    <tr>
                        <th>学生名称</th>
                        <th>微信号</th>
                        <th>项目个数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--                        迭代值 ： 迭代变量  -->
                    <tr th:each="aStudent : ${studentProjects}">
                        <td th:text="${aStudent.name}"></td>
                        <td th:text="${aStudent.wechatId}"></td>
                        <td th:text="${aStudent.projectCount}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>



</div>

<script type="text/javascript" th:src="@{js/myChart.js}"></script>

</body>

</html>